<template>
  <tr>
    <td class="b-item">
      <div class="item1-top">
        <a href="javascript:;" @click="goDetail">{{value.title}}</a>
      </div>
      <div class="item1-bottom">详细分类：{{value.category}} 发布人：{{value.owner__username}} 发布时间：{{value.create_time}}</div>
    </td>
    <td class="b-item">{{value.price}}钻石语点</td>
    <td class="b-item">
      <button class="blue-btn-outline" @click="goDetail">查看详情</button>
      <button class="orange-btn-outline" @click="getOrder" :disabled="user.uid == value.owner__id">接单</button>
      <!-- v-if="user.uid != value.owner__id"  -->
    </td>
  </tr>
</template>

<script>
  import { takeTask } from 'api/task'
  export default {

    name: 'customizedItem',
    computed: {
      user: {
        get() {
          return this.$store.state.user
        }
      }
    },
    data() {
      return {

      };
    },
    props: {
      value: {
        type: Object,
        default() {
          return {/*  */}
        }
      }
    },
    methods: {
      goDetail() {
        const { uid } = this.user
        if (this.value.owner__id == uid) {
          this.$router.push('/customized/my/' + this.value.id)
        } else {
          this.$router.push('/customized/detail/' + this.value.id)
        }
      },
      async getOrder() {
        // 判断
        const result = await takeTask({ taskid: this.value.id })
        if (result) {
          this.$router.push('/customized/detail/' + this.value.id)
        }
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
table.xyd-list.accumulation-list{
  >thead.xyd-list-head{
    >tr{
      >th.h-item{
        &:first-child{
          width: 360px;
        }
        &:nth-child(2){
          width: 250px;
        }
      }
    }
  }
  >tbody.xyd-list-body{
    >tr{
      >td.b-item{
        &:first-child{
          width: 360px;
          .item1-top{
            >a{
              &:hover{
                text-decoration: underline;
                color: #00A2EA;
              }
            }
          }
          .item1-bottom{
            color: #999;
            font-size: 12px;
          }
        }
        &:nth-child(2){
          width: 250px;
          text-align: center;
          color: #666;
        }
        &:last-child{
          text-align: center;
          .blue-btn-outline{
            width: 100px;
            line-height: 1.5;
          }
          .orange-btn-outline{
            width: 100px;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
</style>